<template>
  <div class="manage-object">
    <Wrapper title="校园培训管理">
      <!-- 条件筛选 -->
      <el-form ref="form" class="form">
        <el-row>
          <el-col :span="5">
            <el-form-item label="选择年度:">
              <el-select v-model="form.year" filterable size="small" placeholder="培训年度">
                <el-option label="2020" value="2020" />
                <el-option label="2021" value="2021" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="选择学段:">
              <el-select v-model="form.phase" filterable size="small" placeholder="所有学段">
                <el-option label="小学" value="小学" />
                <el-option label="初中" value="初中" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="选择学科:">
              <el-select v-model="form.subject" filterable size="small" placeholder="所有学科">
                <el-option label="数学" value="数学" />
                <el-option label="语文" value="语文" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item>
              <el-input v-model="form.keyword" size="small" placeholder="请输入项目关键字" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 新增和导出按钮 -->
      <section class="add-download-wrapper">
        <router-link to="/training/newProject" style="margin-right:15px">
          <el-button size="small" type="primary"><svg-icon icon-class="add" />新建培训项目</el-button>
        </router-link>
        <el-button size="small" type="primary"><svg-icon icon-class="download" />导出明细数据</el-button>
      </section>
      <!-- 表单 -->
      <section>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            fixed
          />
          <el-table-column
            label="项目名称"
            width="160"
            prop="name"
            fixed="left"
          >
            <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
          </el-table-column>
          <el-table-column
            prop="date"
            label="开始日期~结束日期"
            width="240"
          />
          <el-table-column
            prop="time"
            label="培训时间"
            min-width="200"
          />
          <el-table-column
            prop="phase"
            label="学段"
            width="55"
          />
          <el-table-column
            prop="period"
            label="学时"
            width="55"
          />
          <el-table-column
            prop="period"
            label="学分"
            width="55"
          />
          <el-table-column
            prop="dateStart"
            label="创建时间"
            min-width="120"
          />
          <el-table-column
            prop="address"
            label="培训地点"
            width="300"
          />
          <el-table-column
            label="操作"
            fixed="right"
            width="260"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                plain
                @click="details(scope.$index,scope.row)"
              ><i class="el-icon-s-order" />详情</el-button>
              <el-button
                size="mini"
                type="primary"
                plain
                @click="details(scope.$index,scope.row)"
              ><i class="el-icon-edit" />编辑</el-button>
              <el-button
                size="mini"
                type="primary"
                plain
                @click="openQR"
              ><svg-icon icon-class="QRcode" />参与码</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-button :type="tableList.length===multipleSelection.length?'success':'' " @click="toggleAllSelection">全选</el-button>
          <el-button @click="toggleSelection">反选</el-button>
          <el-dropdown trigger="click" class="more-operation">
            <el-button>
              更多操作<i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>批量删除</el-dropdown-item>
              <el-dropdown-item>狮子头</el-dropdown-item>
              <el-dropdown-item>螺蛳粉</el-dropdown-item>
              <el-dropdown-item>双皮奶</el-dropdown-item>
              <el-dropdown-item>蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </section>
    </Wrapper>
    <div v-show="isMaskShow" ref="mask" class="mask">
      <div class="Popout">
        <div class="Popout-header">
          <span>参与码</span>
          &nbsp;
          &nbsp;
          &nbsp;
          <i class="maskClose" @click="maskClose">关闭</i>
        </div>
        <div class="Popout-main">
          <p class="QRdownload" @click="QRdownload">下载图片保存到电脑</p>
          <div class="Popout-data">
            <div class="Popout-msg">
              <p>湖南中小学"${123}"</p>
              <p>湖南中小学"${this.temp}"</p>
            </div>
            <div class="Popout-img">
              <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3179800122,897674979&fm=224&gp=0.jpg" alt="">
            </div>
            <p class="remind">此二维码给培训人员扫码签到用</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 二维码弹框 -->
</template>
<script>
export default {
  data() {
    return {
      moreOperation: '',
      form: {
        year: 2021,
        phase: '',
        subject: '',
        keyword: ''
      },
      tableData: [{
        time: '8:30~10:30',
        date: '2016-05-03~2020-4-20',
        name: '王小虎',
        period: 10,
        phase: '小学',
        subject: '语文',
        address: '上海市普陀区金沙江路 1518 弄',
        dateStart: '2016-05-03'
      }, {
        time: '8:30~10:30',
        date: '2016-05-03~2020-4-20',
        name: '王小虎',
        period: 10,
        phase: '小学',
        subject: '语文',
        address: '上海市普陀区金沙江路 1518 弄',
        dateStart: '2016-05-03'
      }, {
        time: '8:30~10:30',
        date: '2016-05-03~2020-4-20',
        name: '王小虎',
        period: 10,
        phase: '小学',
        subject: '语文',
        address: '上海市普陀区金沙江路 1518 弄',
        dateStart: '2016-05-03'
      }, {
        time: '8:30~10:30',
        date: '2016-05-03~2020-4-20',
        name: '王小虎',
        period: 10,
        phase: '小学',
        subject: '语文',
        address: '上海市普陀区金沙江路 1518 弄',
        dateStart: '2016-05-03'
      }, {
        time: '8:30~10:30',
        date: '2016-05-03~2020-4-20',
        name: '王小虎',
        period: 10,
        phase: '小学',
        subject: '语文',
        address: '上海市普陀区金沙江路 1518 弄',
        dateStart: '2016-05-03'
      }, {
        time: '8:30~10:30',
        date: '2016-05-03~2020-4-20',
        name: '王小虎',
        period: 10,
        phase: '小学',
        subject: '语文',
        address: '上海市普陀区金沙江路 1518 弄',
        dateStart: '2016-05-03'
      }, {
        time: '8:30~10:30',
        date: '2016-05-03~2020-4-20',
        name: '王小虎',
        period: 10,
        phase: '小学',
        subject: '语文',
        address: '上海市普陀区金沙江路 1518 弄',
        dateStart: '2016-05-03'
      }, {
        time: '8:30~10:30',
        date: '2016-05-03~2020-4-20',
        name: '王小虎',
        period: 10,
        phase: '小学',
        subject: '语文',
        address: '上海市普陀区金沙江路 1518 弄',
        dateStart: '2016-05-03'
      }, {
        time: '8:30~10:30',
        date: '2016-05-03~2020-4-20',
        name: '王小虎',
        period: 10,
        phase: '小学',
        subject: '语文',
        address: '上海市普陀区金沙江路 1518 弄',
        dateStart: '2016-05-03'
      }, {
        time: '8:30~10:30',
        date: '2016-05-03~2020-4-20',
        name: '王小虎',
        period: 10,
        phase: '小学',
        subject: '语文',
        address: '上海市普陀区金沙江路 1518 弄',
        dateStart: '2016-05-03'
      }],
      tableHeader: [
        {
          title: '项目名称',
          data: 'name',
          width: '55',
          fixed: 'left'
        },
        {
          title: '开始时间~结束时间',
          data: 'date',
          width: '240',
          fixed: false
        },
        {
          title: '培训时间',
          data: 'time',
          width: '240',
          fixed: false
        },
        {
          title: '学段',
          data: 'phase',
          width: '55',
          fixed: false
        },
        {
          title: '学时',
          data: 'period',
          width: '55',
          fixed: false
        },
        {
          title: '学分',
          data: 'period',
          width: '55',
          fixed: false
        },
        {
          title: '创建时间',
          data: 'dateStart',
          width: '120',
          fixed: false
        }
      ],
      multipleSelection: [],
      tableList: [],
      isMaskShow: false
    }
  },
  mounted() {
    this.tableList = this.$refs.multipleTable.data
  },
  methods: {
    // 弹窗关闭
    maskClose() {
      this.isMaskShow = false
    },
    // 二维码下载
    QRdownload() {
      console.log('二维码下载')
    },
    // 打开二维码
    openQR() {
      this.isMaskShow = true
    },
    // 详情
    details(index, data) {
      this.$router.push('/training/newProject')
    },
    // 选中事件
    handleSelectionChange(val) {
      // 已选队列
      this.multipleSelection = val
    },
    // 全选
    toggleAllSelection() {
      this.$refs.multipleTable.toggleAllSelection()
    },
    // 反选
    toggleSelection() {
      this.tableList.forEach((el) => {
        this.$refs.multipleTable.toggleRowSelection(el)
      })
    }
  }
}
</script>
<style lang="scss">
.manage-object{
  .main-wapper{
    min-width: 1200px;
  .form{
      display: flex;
      justify-content: space-between;
      .el-form-item__content{
        float: left;
      }
      .el-form-item__label{
        font-size: 14px;
        font-weight: normal;
      }
    }
    .add-download-wrapper{
      padding-bottom: 30px;
      .svg-icon{
        color: rgb(255, 255, 255) ;
        font-size: 16px;
        margin-right: 5px;
      }
    }
    .more-operation{
      margin-left: 10px;
    }
  }
  .mask{
    display: block;
    position: absolute;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000000, $alpha: 0.5);
    .Popout{
      position: absolute;
      box-sizing: border-box;
      width: 360px;
      height: 630px;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      background-color: pink;
      font-size:14px ;
      .Popout-header{
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: white;
        height: 33px;
        .maskClose{
          cursor: pointer;
        }
      }
      .Popout-main{
        height: calc(100% - 33px);
        background-color: #545454;
        text-align: center;
        color: white;
        .QRdownload{
          display: inline-block;
          margin: 30px 0;
        }
        .Popout-data{
          width: 92%;
          margin: 0 auto;
          padding-top: 30px;
          background-color: #1C1C1C;
          border-radius: 6px;
          .Popout-msg{
            width: 80%;
            margin: 0 auto;
            background-color: #525252;
            border-radius: 10px;
            p{
              padding: 10px 0;
            }
          }
          .Popout-img{
            display: inline-block;
            width: 220px;
            height: 220px;
            margin: 20px auto;
            border-radius: 10px;
            overflow: hidden;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .remind{
            padding-bottom:80px ;
          }
        }
      }
    }
  }
}
</style>
